<template>
  <div class="m-content">



        <div class="line"></div>
        <span></span>
        <el-menu
                :default-active="activeIndex2"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">

          <el-menu-item index="1"> 欢迎来到647游戏论坛</el-menu-item>
          <el-menu-item index="2"> <span class="spanx"></span></el-menu-item>
          <!--<el-submenu index="3">-->
            <!--<template slot="title">我的工作台</template>-->
            <!--<el-menu-item index="2-1">选项1</el-menu-item>-->
            <!--<el-menu-item index="2-2">选项2</el-menu-item>-->
            <!--<el-menu-item index="2-3">选项3</el-menu-item>-->
            <!--<el-submenu index="2-4">-->
              <!--<template slot="title">选项4</template>-->
              <!--<el-menu-item index="2-4-1">选项1</el-menu-item>-->
              <!--<el-menu-item index="2-4-2">选项2</el-menu-item>-->
              <!--<el-menu-item index="2-4-3">选项3</el-menu-item>-->
            <!--</el-submenu>-->
          <!--</el-submenu>-->
          <el-menu-item index="4" >
            <el-avatar class="avatar-24" :src="user.avatar" ></el-avatar>

            <el-link class="length" href="/userDetail">{{ user.name }}</el-link>
          </el-menu-item>

          <el-menu-item index="5" >
            <el-link href="/main">主页</el-link>
          </el-menu-item>
          <el-menu-item index="6">
            <span v-show="!hasLogin"><el-link  href="/login">登录</el-link></span>
            <span v-show="hasLogin"><el-link type="danger" @click="logout">退出</el-link></span>
          </el-menu-item>
          <el-menu-item index="7">
            <span><el-link  href="/register">注册</el-link></span>
          </el-menu-item>
        </el-menu>
    <img id="img1" src="../assets/images/cc.jpg" width="100%" height="90%" alt="" />

    <div>
      <el-row >
        <el-col :span="24"></el-col>
      </el-row>
      <el-row>
        <el-col :span="24"></el-col>
      </el-row>
      <el-row>
        <el-col :span="24"></el-col>
      </el-row>
      <el-row>
        <el-col :span="24"></el-col>
      </el-row>
      <el-row>
        <el-col :span="24"></el-col>
      </el-row>
      <el-row>
        <el-col :span="24"></el-col>
      </el-row>
    </div>
    <div>
      <el-row :gutter="20">
        <el-col :span="1" :offset="1" ><div ><el-tag color="#d10020"><b>Y O U</b></el-tag></div></el-col>
        <el-col :span="3"><div> <el-tag color="#d17017">Y O U论坛社区欢迎大家</el-tag></div></el-col>
      </el-row>

    </div>

  </div>

</template>

<script>
  export default {
    name: "Header",
    data() {
      return {
        user: {
          name: '请先登录',
          avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
        },
        hasLogin: false,
        activeIndex: '1',
        activeIndex2: '1'
      }
    },
    methods: {
      logout() {
        const _this = this
        _this.$axios.get("/user/logout", {
          headers: {
            "Authorization": localStorage.getItem("token")
          }
        }).then(res => {
          _this.$store.commit("REMOVE_INFO")
          _this.$router.push("/login")

        })
      }
    },
    created() {

      if(!this.hasLogin && localStorage.getItem("token")){

        this.$axios.get('/user/autoLogin?jwt='+localStorage.getItem("token"),{headers:{
            "Authorization": localStorage.getItem("token")
          }}).then(res=>{
          const userInfo = res.data.data;
          console.log(userInfo)
          this.$store.commit("SET_USERINFO",userInfo)
          console.log(this.$store.getters.getUser)
          this.user.name = this.$store.getters.getUser.name
          this.user.avatar = this.$store.getters.getUser.avatar
          this.hasLogin = true
        })
      }
      if(this.$store.getters.getUser.username) {
        console.log(this.$store.getters.getUser)
        this.user.name = this.$store.getters.getUser.name
        this.user.avatar = this.$store.getters.getUser.avatar
        this.hasLogin = true
      }


    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  }
</script>

<style scoped>
  .length{
    width: 50px;
  }
  .avatar-24 {
    width: 24px;
    height: 24px;
    border-radius: 50%;
  }
  #img1{
    position:absolute;
    clip:rect(0px 1900px 140px 0px);
    z-index:-1;
    -webkit-user-drag: none;
  }
  .spanx{
    display:block;
    width:1300px;
  }
  .el-row {
    margin-bottom: 20px;
  &:last-child {
     margin-bottom: 0;
   }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

</style>